<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>时间轴折线柱状切换图</title>
	</head>
	<script src="/static/js/echarts.min.js"></script>

	<body>
		<div id="main" style="width: 1000px;height:600px;"></div>
	</body>
	<script>
		/*
			时间轴组件提供：
		timeline: {
					loop: true,
					axisType: 'category',
					show: true,
					autoPlay: true,
					playInterval: 2000,
					data: 
				}
		*/

		var myChart = echarts.init(document.getElementById('main'));
		option = {
			baseOption:{
				timeline:{
					loop:true,
					axisType:'category',
					show:true,
					autoPlay:true,
					playInterval:2000,
					data:[{%for i in mytmp.keys()%} "{{i}}",{%endfor%}]
				},
				grid:{

				},
				xAxis:{
				    type:'category',
					data:[{%for i in mylist%} "{{i}}",{%endfor%}]
				},
				yAxis:{
					type:'value',
					axisLine:{
					    show:true,
						lineStyle:{
					        color:'#0066CC'
						}
					}
				},
				tooltip:{
				    tragger:'axis'
				},
				toolbox:{
					feature:{
					    magicType:{type:['line','bar'],show:true}
					}
				},
				series:[{
				    type:'bar'
				}]
			},
			options:[
				{% for j in mytmp.keys()%}
				{
					title:{
					    text:"{{j}}"
					},
					series:[{
					    data:[{%for x in range(5)%}{name:"{{mylist[x]}}",value:{{mytmp[j][x]}}},{%endfor%}]
					}]
				},
				{%endfor%}
			]
		};

		myChart.setOption(option);
	</script>

</html>